<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>节点操作</title>
	<style type="text/css">
	#dvs{width:800px;height:500px;border:solid 1px blue;margin:0 auto;}
	.pic{width:100px;height:100px;border:solid 1px green;float:left;margin:5px;}

	.res{border:solid 1px green;padding:5px;}


	</style>
</head>
<body>
	

	<button>在头部插入</button>
	<button>在尾部插入</button>
	<button>在元素之外插入(尾部)</button>
	<button>在元素之前插入(头部)</button>
	<button>删除元素</button>
	<button>清空元素</button>
	<button>替换元素</button>
	<button>克隆元素</button>
	<button>包裹元素</button>	
	<button>取消包裹</button>
	<div id='dvs'></div>

	<script type="text/javascript" src='jquery-1.8.3.min.js'></script>
	<script type="text/javascript">
	//头
	$('button').eq(0).click(function(){

			var img = imgs();

			// $('#dvs').prepend(img);
			img.prependTo('#dvs');
	})
	//	尾部
	$('button').eq(1).click(function(){

			var img = imgs();

			// $('#dvs').append(img);
			img.appendTo('#dvs');
	})
	//元素之外(尾)
	$('button :eq(2)').click(function(){

		var img = imgs();

		// $('#dvs').after(img);
		img.insertAfter('#dvs');
	})
	//元素之前(头)
	$('button:nth-child(4)').click(function(){

		var img = imgs();

		// $('#dvs').before(img);
		img.insertBefore('#dvs');
	})
	//删除
	$('button').eq(4).click(function(){

		$('#dvs').find('.pic').first().remove();
	})
	//清空
	$('button').eq(5).click(function(){

		$('#dvs').empty();
	})
	//替换
	$('button').eq(6).click(function(){

		var img = imgs();
		$('#dvs :first').replaceWith(img);
	})
	//克隆
	$('button').eq(7).click(function(){

		$('#dvs :first').clone(true).appendTo('#dvs');
	})
	//包裹
	$('button').eq(8).click(function(){

		$('#dvs').wrap('<div class="res"></div>')
	})
	//取消包裹
	$('button').eq(9).click(function(){

		$('#dvs').unwrap();
	})

	function imgs()
	{
		var div = $('<div class="pic"><img src="" alt="" width="100%"/></div>');

		div.find('img').attr('src','./img/'+rand(1,8)+'.jpg');

		//$('#dvs').append(div);	

		return div;
	}

	function rand(m,n)
	{
		return Math.ceil(Math.random()*(n-m+1))+m-1;
	}

	


	</script>
</body>
</html>